<template>
	<view class="layout">
		<view class="top-nav" :style="{'background':barBg,'padding-top':topNavHeight+'px'}" >
			<topbar v-if="isShow" :goHome="goHome"  @back="$emit('back')" :goBack="goBack" :title="title" :color="color">
				<template v-slot:back>
					<slot name="back"></slot>
				</template>
				<template v-slot:title>
					<slot name="title"></slot>
				</template>
				<template v-slot:right>
					<slot name="right"></slot>
				</template>
			</topbar>
			<slot name="header"></slot>
		</view>
		<view class="body" :style="style">
			<scroll-view :scroll-top="scrollTop" @scrolltolower="$emit('scrolltolower')" @scrolltoupper="$emit('scrolltoupper')"  class="scroll-view" scroll-y="true">
				<template>
					<slot></slot>
				</template>
			</scroll-view>
		</view>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	import { mapState  } from 'vuex'
	export default {
		name: "m-layout-scroll",
		props: {
			isShow: {
				type: Boolean,
				default: true
			},
			title: String,
			color: {
				default: 'var(--text)',
				type: String,
			},
			goHome: {
				type: Boolean,
				default: false
			},
			goBack: {
				type: Boolean,
				default: true,
			},
			shouldBack: {
				type: Boolean,
				default: true,
			},
			isBgUnset: {
				type: Boolean,
				default: true
			},
			//默认内边距
			gap: {
				default: '24',
				type: String,
			},
			//顶部导航栏颜色
			barBg: {
				type: String,
				default: ""
			},
			scrollTop: {
				default: 0,
				type: [String,Number],
			},
		},
		computed: {
			...mapState({
				topNavHeight: state => state.general.topNavHeight
			}),
			style() {
				const gap = this.gap.split(" ").filter(x => x);
				return {
					padding: gap.map(n => `${n}rpx`).join(' '),
				}
			}
		},
	}
</script>

<style lang="scss">
	.layout {
		height: calc(100vh - var(--window-bottom));
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.top-nav {
			background: var(--bg_block);
			padding: var(--status-bar-height) 0 0;
			position: sticky;
			top: 0;
			z-index: 99;
		}
		.body {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			.scroll-view {
				height: 100%;
			}
		}
	}
</style>
